<!-- 模型库卡片 -->
<template>
  <div
    class="box"
    :style="{ width: typeof cardWidth === 'string' ? cardWidth : cardWidth + 'px', height: cardHeight + 'px' }"
    @click.stop="onClickCard()"
  >
    <div class="box-example"></div>
    <div class="head">
      <div class="head-up">
        <div class="left-title">
          <div class="title-icon"><i class="iconfont icon-a-bg-model21"> </i></div>
          <span class="elliptical-1 title-text" :title="data?.modelName">{{ data?.modelName }}</span>
        </div>
        <div class="head-right">
          <slot name="head-right">
            <div class="collect" @click.stop>
              <collect-button
                :msg="collectButtonCancelMsg"
                :show-default-text="false"
                :default-status="data?.isFavorite"
                :favorite-obj-type="4"
                :favorite-obj-name="data?.modelName"
                :favorite-obj-id="data?.id"
                @on-click="setCollect"
                @click-ok="ok"
              />
              <slot name="tool-bar"></slot>
            </div>
          </slot>
        </div>
      </div>
      <div class="head-down" :title="data?.description">{{ data?.description }}</div>
    </div>
    <div class="bottom">
      <div class="bottom-double-box">
        <div class="info">
          <template v-for="(item, index) in data?.commonModelLabelVOList" :key="index">
            <div v-if="index < showLabelNumber" class="base-label label-text" :title="item.labelName">{{ item.labelName }}</div>
            <a-popover v-else-if="index === showLabelNumber" placement="rightTop">
              <template #content>
                <div class="bottom-tooltip">
                  <div v-for="(t, n) in data?.commonModelLabelVOList?.slice(showLabelNumber, data?.commonModelLabelVOList.length)" :key="n">
                    <div class="base-label tooltip-label-text" :title="t.labelName">{{ t.labelName }}</div>
                  </div>
                </div>
              </template>
              <div class="base-label--more">...</div>
            </a-popover>
          </template>
        </div>
      </div>
    </div>

    <img class="hover-svg" src="@/assets/img/modal-base/card-svg.svg" />
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  import CollectButton from '../CollectButton/index.vue'
  interface LabelList {
    id: string
    labelId: string
    labelName: string
    projectId: string
  }
  export interface ModelCardData {
    id?: string
    isFavorite?: boolean
    description?: string
    modelName?: string
    commonModelLabelVOList?: LabelList[]
  }

  export interface Props {
    data?: ModelCardData | null
    cardWidth?: number | string
    cardHeight?: Number
    collectButtonCancelMsg?: string
  }

  let props = withDefaults(defineProps<Props>(), {
    data: () => {
      return {
        id: '',
        modelName: '',
        collectStatus: false,
        description: '',
        commonModelLabelVOList: []
      }
    },
    cardWidth: 313,
    cardHeight: 170,
    collectButtonCancelMsg: '是否取消收藏此模型？'
  })

  const emits = defineEmits(['onClick', 'onCollect', 'okCancel'])

  const omitTitle = ref<Array<LabelList>>([])
  const showLabelNumber = ref<number>(3)

  onMounted(() => {
    getBeyondTitle()
  })
  const onClickCard = () => {
    emits('onClick', props)
  }
  const setCollect = (item: ModelCardData | null) => {
    emits('onCollect', item)
  }
  // 确认取消
  const ok = () => {
    emits('okCancel')
  }

  const getBeyondTitle = () => {
    let LABEL_LIST_LENGTH = 0
    if (!props.data?.commonModelLabelVOList) return
    LABEL_LIST_LENGTH = props.data?.commonModelLabelVOList.length
    let sumName: Array<LabelList> = []
    if (LABEL_LIST_LENGTH > showLabelNumber.value) {
      for (let i = showLabelNumber.value; i < LABEL_LIST_LENGTH; i++) {
        sumName.push(props.data.commonModelLabelVOList[i])
      }
    }
    omitTitle.value = sumName
  }
</script>
<style lang="less" scoped>
  .box {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid @border1;
    border-bottom: none;
    border-radius: 10px;
    transition: all 0.2s;
    flex-direction: column;
    cursor: pointer;

    .box-example {
      position: absolute;
      top: 20px;
      left: 0;
      width: 3px;
      height: 22.957px;
      background: @primary1;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .head {
      padding: 20px 24px;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .head-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        gap: 0 8px;
        margin-bottom: 12px;

        .left-title {
          display: flex;
          align-items: center;
          min-width: 0;
          height: 24px;
          gap: 8px;

          .title-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            background: #f5f5f5;
            border-radius: 50%;

            .iconfont {
              font-size: 10px;
              color: @primary1;
            }
          }

          .title-text {
            max-width: 100%;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.75);
            line-height: 24px; /* 150% */
          }
        }

        .head-right {
          display: flex;
          align-items: center;
          gap: 8px;

          .head-right-line {
            width: 0.5px;
            height: 12px;
            background: rgba(0, 0, 0, 0.05);
          }

          .collect,
          .load {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 16px;
            gap: 6px;
            border-radius: 6px;
          }
        }
      }

      .head-down {
        display: -webkit-box;
        overflow: hidden;
        height: 44px;
        font-size: 14px;
        font-family: 'Noto Sans SC';
        text-overflow: ellipsis;
        color: var(--text-text-02, rgba(25, 25, 48, 0.75));
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        align-self: stretch;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 166.667% */
      }
    }

    .bottom {
      position: relative;
      z-index: 5;
      overflow: hidden;
      width: 100%;
      height: 50px;

      .bottom-double-box {
        width: 100%;
        height: 100px;
        transform: translateY(0);
        transition: transform 0.2s;

        .info {
          display: flex;
          justify-content: flex-start;
          gap: 6px;
          align-items: center;
          padding: 0 20px;
          height: 50px;
          align-self: stretch;

          & > div {
            display: flex;
            align-items: center;
            gap: 4px;

            .label {
              font-size: 14px;
              font-family: 'Noto Sans SC';
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
              font-style: normal;
              line-height: 22px; /* 157.143% */
            }

            .value {
              color: rgba(0, 0, 0, 0.75);
              font-weight: 700;
            }
          }
        }

        .tool {
          height: 50px;
          color: #fff;
          background: @primary1;
          border-top: 0.5px solid @border1;
        }
      }
    }

    .hover-svg {
      position: absolute;
      right: 12px;
      bottom: 12px;
      z-index: 1;
      display: none;
    }

    &:hover {
      box-shadow: 0 2px 16px 0 rgba(24, 104, 233, 0.12);

      .head {
        .head-up {
          .left-title {
            .title-text {
              color: @primary1;
              font-weight: 700;
            }
          }
        }
      }

      .hover-svg {
        display: block;
      }
    }
  }

  .base-label {
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 3px 6px;
    width: max-content;
    max-width: 4.5rem;
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(133, 153, 191, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-weight: 400;
    line-height: 20px;
    word-break: keep-all;
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .base-label--more {
    padding: 3px 6px;
    font-size: 12px;
    color: rgba(17, 22, 31, 0.52);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-weight: 400;
    line-height: 20px; /* 166.667% */
    .fc();
  }
</style>
